import { Button, Form, Input, Modal, Select, message } from 'antd';
import React, { useEffect, useState } from 'react';
import { addAdminLb } from '@/services/adminLbService'
import UploadImg from '@/components/UploadComponent';

interface Props {
  modalVisible: boolean;
  onSubmit: () => void;
  onCancel: () => void;
};

const CreateModal: React.FC<Props> = (props) => {
  const { modalVisible, onSubmit, onCancel } = props;
  const [form] = Form.useForm();
  const [imgUrl, setImgUrl] = useState<string>();
  const saveRole = () => {
    form.validateFields({ validateOnly: false })
      .then(() => {
        addAdminLb({ ...form.getFieldsValue(), ImgUrl: imgUrl }).then(result => {
          const { StatusCode } = result;
          if (StatusCode === 201) {
            message.success("保存成功！");
            onSubmit?.();
          }
        })
      }, () => {
      })
  }

  useEffect(() => {
    form.resetFields();
  }, [])

  return (
    <Modal
      width={700}
      destroyOnClose
      title="新建"
      open={modalVisible}
      onCancel={() => onCancel()}
      footer={[
        <Button key="submit" onClick={saveRole} type="primary">
          保存
        </Button>,
        <Button key="back" onClick={onCancel} >
          取消
        </Button>,
      ]}
    >
      <Form
        name="basic"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        style={{ maxWidth: 600 }}
        form={form}
        initialValues={{ remember: true }}
        autoComplete="off"
      >
        <Form.Item<AdminLbType.AdminLbRequest>
          label="文章链接"
          name="ArticleUrl"
          rules={[{ required: true, message: '请填入文章链接!' }]}
        >
          <Input name='summary' type='text' />
        </Form.Item>
        <Form.Item<AdminLbType.AdminLbRequest>
          label="图片"
          name="ImgUrl"
        >
          <UploadImg callBack={setImgUrl} />
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default CreateModal;
